<!-- 下钻 -->
<template>
	<div class="run-in-cont">
		<h2>下钻</h2>
		<div id='runIn'></div>
	</div>
</template>

<script>
// // 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
// import * as echarts from 'echarts/core'
// // 引入柱状图图表，图表后缀都为 Chart
// import { BarChart } from 'echarts/charts'
// // 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
// import {
// 	TitleComponent,
// 	TooltipComponent,
// 	GridComponent,
// 	DatasetComponent,
// 	TransformComponent
// } from 'echarts/components'
// // 标签自动布局、全局过渡动画等特性
// import { LabelLayout, UniversalTransition } from 'echarts/features'
// // 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
// import { CanvasRenderer } from 'echarts/renderers'

// // 注册必须的组件
// echarts.use([
// 	TitleComponent,
// 	TooltipComponent,
// 	GridComponent,
// 	DatasetComponent,
// 	TransformComponent,
// 	BarChart,
// 	LabelLayout,
// 	UniversalTransition,
// 	CanvasRenderer
// ])
import echarts from './chart'
export default {
	data () {
		return {
			drilldownData: [
				{
					dataGroupId: '1',
					data: [
						{
							name: '第一矿',
							val1: { value: 5, groupId: '1' }
						},
						{
							name: '第二矿',
							val1: { value: 8, groupId: '2' }
						},
						{
							name: '第三矿',
							val1: { value: 13, groupId: '3' }
						}
					]
				},
				{
					dataGroupId: '2',
					data: [
						{
							name: '第四矿',
							val1: { value: 5, groupId: '1' }
						},
						{
							name: '第五矿',
							val1: { value: 8, groupId: '2' }
						},
						{
							name: '第六矿',
							val1: { value: 13, groupId: '3' }
						}
					]
				},
				{
					dataGroupId: 'cars',
					data: [
						['Toyota', 4],
						['Opel', 2],
						['Volkswagen', 2]
					]
				}
			]
		}
	},
	methods: {
		drawLine () {
			const _this = this
			// 基于准备好的dom，初始化echarts实例
			let myChart = echarts.init(document.getElementById('runIn'))
			// 绘制图表
			const option = {
				title: {
					show: false,
					text: ''
				},
				tooltip: {
					trigger: 'axis'
				},
				grid: {
					top: '40',
					right: '10',
					left: '10',
					bottom: '30',
					containLabel: true
				},
				dataGroupId: '',
				animationDurationUpdate: 500,
				xAxis: {
					type: 'value',
					// 坐标轴线
					axisLine: {
						show: false
					},
					// 坐标轴刻度相关设置
					axisTick: {
						show: false,
						interval: 0
					},
					// 坐标轴刻度标签的相关设置
					axisLabel: {
						interval: 0,
						align: 'center',
						rotate: '20',
						margin: '36'
					},
					triggerEvent: true

				},
				yAxis: {
					type: 'category',
					data: ['北方公司', '蒙东公司', '滇东公司', '华亭煤业', '陕西矿业', '扎煤', '庆阳煤电']
				},
				series: [
					{
						name: '报警数量',
						type: 'bar',
						barWidth: 35,
						itemStyle: {
							color: '#04e9ee'
						},
						universalTransition: {
							// 开启全局动画过度策略
							enabled: true,
							divideShape: 'clone'
						},
						data: [
							{
								value: 1,
								groupId: '1'
							},
							{
								value: 2,
								groupId: '2'
							},
							{
								value: 3,
								groupId: '3'
							},
							{
								value: 4,
								groupId: '4'
							},
							{
								value: 5,
								groupId: '5'
							},
							{
								value: 6,
								groupId: '6'
							},
							{
								value: 7,
								groupId: '7'
							}
						]
					}
				]
			}
			myChart.setOption(option)
			myChart.on('click', function (event) {
				if (event.data) {
					var subData = _this.drilldownData.find(function (data) {
						return data.dataGroupId === event.data.groupId
					})
					if (!subData) {
						return
					}
					myChart.setOption({
						xAxis: {
							type: 'value'
						},
						yAxis: {
							type: 'category',
							data: subData.data.map(function (item) {
								return item.name
							})
						},
						series: [
							{
								type: 'bar',
								name: '设备离线',
								barWidth: 35,
								itemStyle: {
									color: '#fed62a'
								},
								data: subData.data.map(function (item) {
									return item.val1
								}),
								universalTransition: {
									enabled: true,
									divideShape: 'clone'
								}
							},
							{
								type: 'bar',
								name: '超排数量',
								barWidth: 35,
								itemStyle: {
									color: '#21c546'
								},
								data: subData.data.map(function (item) {
									return item.val2
								}),
								universalTransition: {
									enabled: true,
									divideShape: 'clone'
								}
							}
						],
						graphic: [
							{
								type: 'text',
								left: 50,
								top: 20,
								style: {
									text: 'Back',
									fontSize: 18
								},
								onclick: function () {
									myChart.setOption(option, true)
								}
							}
						]
					})
				}
			})
		}
	},
	mounted () {
		this.$nextTick(() => {
			this.drawLine()
		})
	}
}
</script>

<style lang='less' scoped>
.run-in-cont{
	margin-top: 20px;
	width: 100%;
	height: 400px;
	#runIn{
		width: 100%;
		height: 100%;
	}
}
</style>
